<template>
  <div class="system-setting-container">
    <el-row :gutter="0" style="background-color: #ffffff">
      <el-col :span="13" style="border-style: none dashed none none;border-color:#cccc;border-width:1px;">

        <div class="main_box"
             style="padding:0;width:800px;overflow: hidden;font-size: 14px;font-family:'微软雅黑',tahoma,sans-serif;">

          <!-- <div>
            <img src="https://net163.oss-cn-beijing.aliyuncs.com/newsletter/newsletter.png" width="300"
                 style="float: left;" />
            <div style="padding-left: 315px;padding-top:7px;color: #6ABA3D;">
              <strong
                      style="display:block;font-size:16px;line-height: 22px;height: 22px;">{{ state.parameter.banner.head}}</strong>
              <span @click="editinput('banner')">{{ state.parameter.banner.title}}</span>
            </div>
            <div style="padding-top: 20px;">
              <img src="https://net163.oss-cn-beijing.aliyuncs.com/newsletter/banner.png" style="width:100%" />
            </div>
          </div> -->
          <div class="newitem_title background-header" style="height: 142px;" @click="editinput('banner')">
            <div style="float: right;margin-right: 38px;color: #fff;text-align: right;margin-top: 95px;">
              <div>{{ state.parameter.banner.title}}</div>
            </div>
          </div>
          <!-- 第一部分 -->
          <div style="padding: 0 20px;">

            <div class="newitem_title" style="color: #0b3b7c;font-size: 24px;padding-top:23px;padding-bottom: 23px;">
              <!-- 标题1 -->
              <img src="/src/assets/images/emailTmp/tmpIcon.png" width="40" style="float:left;padding-top: 5px;" />
              {{state.parameter.newTwo.head}}
            </div>
            <div class="newitem_title background-interview" style="height: 235px;" @click="editinput('newTwo')">
              <div class="news-title"
                   style="float: right;margin-right: 20px;width:330px;font-size: 15px;font-family: Ubuntu, Helvetica, Arial, sans-serif;line-height: 22px;">
                <h2
                    style="font-size:20px;color:#06dff9;font-weight:bold;margin-top:70px;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">
                  {{ state.parameter.newTwo.title}}
                </h2>
                <!-- <div class="master-title" style="margin-top: 30px;font-size: 20px;padding-bottom: 10px;">
                  <p><a :href="state.parameter.newTwo.href" style="color: #06dff9;"
                       target="_blank">{{ state.parameter.newTwo.title}}</a></p>
                </div> -->
                <div
                     style="color:#fff;margin-top: 20px; line-height:17px;overflow: hidden;font-weight:normal;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">
                  {{state.parameter.newTwo.content}}
                  <!-- 在国家互联网信息办公室指导下，北京市互联网信息办公室积极推进个人信息出境标准合同备案制度落地工作，继获批全国首个数据出境安全评估项目后，日前又完成了首家企业个人信息出境标准合同备案，实现了数据出境合规的“两个第一” -->
                </div>
              </div>
            </div>
            <!-- 第一部分结束 -->

            <!-- 第二部分 -->
            <div class="newitem_title" style="color: #0b3b7c;font-size: 24px;padding-top:23px;padding-bottom: 23px;">
              <!-- 标题2 -->
              <img src=" /src/assets/images/emailTmp/tmpIcon.png" width="40" style="float:left;padding-top: 5px;" />
              {{state.parameter.one.head}}
            </div>

            <div style="column-count: 2;">
              <!-- 左边 -->
              <div class="media_list" style="vertical-align: top;" @click="editinput('one')">
                <div class="newtitle_text news-title" @click="editinput('one')" style="padding:0 20px">
                  <div class="master-title" style="margin-top: 27px;">
                    <p class="master-p"><a :href="state.parameter.one.href" style="color: #06dff9;"
                         target="_blank">{{ state.parameter.one.title}}</a></p>
                  </div>
                  <div class="assist-title">
                    <p class="assist-p"><a :href="state.parameter.one.href"
                         target="_blank">{{ state.parameter.one.content}}</a></p>
                  </div>

                </div>
                <div class="line-background" style="height: 80px;"></div>
                <!-- <img src="/src/assets/images/emailTmp/line.jpg" height="110"  /> -->
              </div>
              <!-- 右边 -->
              <div class="media_list" style="vertical-align: top;" @click="editinput('newcon')">
                <div class="machine-background" style="height: 80px;">
                </div>

                <div class="newtitle_text news-title" style="padding:0 20px">
                  <div class="master-title" style="margin-top: 20px;height: 44px;overflow: hidden;">
                    <p><a :href="state.parameter.newcon.href" style="color: #06dff9;overflow: hidden;"
                         target="_blank">{{ state.parameter.newcon.title}}</a></p>
                  </div>
                  <div class="assist-title">
                    <p><a :href="state.parameter.newcon.href" target="_blank">{{ state.parameter.newcon.content}}</a>
                    </p>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- 第二部分结束 -->
          <table style="width:800px;border-collapse: collapse;">
            <tr>
              <td style="text-align: center;">
                <span class="btn_link">点击了解瀛泰数据合规委</span>
              </td>
            </tr>
            <tr>
              <td style="padding:10px 0px;" colspan="2">
              </td>
            </tr>
            <tr>
              <td class="newfoot"
                  style="padding:0px;color: #0b3b7c;font-size:16px;font-weight: bold; text-align: center;">
                <div
                     style="margin-left: 36px;margin-top: 20px;margin-bottom: 33px; width: 730px;border-top: 1px dashed hsl(192deg 87.21% 66.27%);padding-top: 10px;">
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">上海</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">临港新片区</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">天津</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">德州</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">青岛</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">临沂</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">舟山</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">宁波</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#"
                     style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">广州</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#" style="color: #0b3b7c;text-decoration: none;padding-right: 9px;">海口</a>
                </div>

              </td>
            </tr>
          </table>
        </div>

      </el-col>
      <el-col :span="11" style="position: relative">
        <div class="form-box"
             style="position: fixed;bottom:80px;right: 2%;background: #fff;border-radius: 5px;padding: 15px;z-index: 900;width: 500px;">
          <el-card shadow="hover">
            <el-tabs class="demo-tabs">
              <el-tab-pane label="鼠标点击左边标题修改（标题，简介，链接）" name="first"></el-tab-pane>
            </el-tabs>
            <el-form size="default">
              <el-form-item label="模板标题" prop="title">
                <el-input v-model="state.emailTempForm.title" type="input" placeholder="模板标题" />
              </el-form-item>

              <el-form-item label="头部标题" prop="title">
                <el-input v-model="state.bset.head" type="input" placeholder="头部标题" />
              </el-form-item>

              <el-form-item label="标题" prop="title">
                <el-input v-model="state.bset.title" type="textarea" placeholder="" rows="2" />
              </el-form-item>

              <el-form-item label="描述" prop="content">
                <el-input v-model="state.bset.content" type="textarea" placeholder="" rows="6" />
              </el-form-item>
              <!--                <el-form-item label="缩略图" prop="titleUrl">
                  <el-upload
                      class="avatar-uploader"
                      :action="singleFile"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100" height="60" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>-->

              <el-form-item label="链接地址" prop="content">
                <el-input v-model="state.bset.href" type="input" placeholder="链接地址" />
              </el-form-item>

            </el-form>
          </el-card>
          <el-card shadow="hover">
            <span class="dialog-footer">
              <el-button size="default" @click="goback">返 回</el-button>
              <el-button type="primary" size="default" @click="onSubmit">全部保存</el-button>
              <el-button type="primary" size="default" color="#626aef" @click="onSubmitAdd">另存为</el-button>
            </span>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, reactive, toRefs, onBeforeUnmount, defineComponent, ref, unref, shallowRef } from 'vue';
import { ElMessage, ElForm, ElMessageBox, UploadProps } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import element from '/@/views/pages/element/index.vue';
import { addEmailTmpList, editEmailTmpList, getEmailTmp, settingTmpList, settingTmpListAdd } from '/@/api/system/mailtmp';

const route = useRoute();
const router = useRouter();
const imageUrl = ref('');
const singleFile = import.meta.env.VITE_API_URL + '/api/v1/pub/upload/singleFile';

interface parameterTemp {
	head: string;
	title: string;
	image: string;
	href: string;
	content: string;
}

const state = reactive({
	emailTempForm: {
		id: 0,
		title: '',
	},
	parameter: {
		banner: {
			head: '数据资讯',
			title: '2022年 第1期：2022.08.01-2022.08.18',
		} as parameterTemp,
		one: {
			head: '数据要闻',
			title: '澳大利亚加入全球跨境隐私规则论坛澳大利亚加入全球跨境隐私规则论坛',
			content: '1根据《通知》，在国土空间规划批复前，经依法批准的土地利用总体规划、城乡规划、海洋功能区划继续执行，作为建设项',
			href: 'http://qq.com',
		} as parameterTemp,
		newcon: {
			title: '思科证实被勒索攻击，疑发生泄露数据思科证实被勒索攻击，疑发生泄露数',
			content: '2022年8月10日，思科证实其企业IT基础设施遭受安全事件。思科员工的凭据已泄露，攻击者同步保存在受害者浏览器中的凭据。',
			href: 'http://qq.com',
		} as parameterTemp,
		newTwo: {
			head: '新规速递&政策导向',
			title: '伟大抗战精神是中国人民弥足珍贵的精神财富美国《欧亚评论》网站8月31日文章，原题：“遏制”中国可能引发全球',
			href: 'http://qq.com',
		} as parameterTemp,
	},
	bset: {} as parameterTemp,
	eventName: '' as string,
});

const { emailTempForm, parameter } = toRefs(state);
console.log('newcon.title', state.parameter.newcon.title);

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
	console.log('response=', response.data.full_path);
	state.bset.image = import.meta.env.VITE_API_URL + '/' + response.data.path;
	imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
		ElMessage.error('上传文件的必须是jpeg,jpg,png格式');
		return false;
	} else if (rawFile.size / 1024 / 1024 > 5) {
		ElMessage.error('限制最大上传文件大小为 5MB!');
		return false;
	}
	return true;
};

//数据监听
function editinput(key: string) {
	state.eventName = key;

	Object.keys(state.parameter).forEach((k) => {
		//console.log(key, state.parameter[key]);
		if (key == k) {
			state.bset = state.parameter[k];
		}
	});
}

function goback() {
	router.go(-1);
}

function onSubmit() {
	if (!state.emailTempForm.id) {
		ElMessage.success('邮件模板没有选择模板');
		return;
	}

	if (rule() == false) {
		return;
	}
	//state.emailTempForm.title = state.parameter.banner.title;

	if (state.emailTempForm.id !== 0) {
		//修改
		settingTmpList(state.parameter, state.emailTempForm.id, state.emailTempForm.title).then(() => {
			ElMessage.success('邮件模板设置成功');
			//emit('dataList')
			//router.push({ path: '/system/mailtmp/list' });
		});
	}
}

function onSubmitAdd() {
	if (!state.emailTempForm.id) {
		ElMessage.success('邮件模板没有选择模板');
		return;
	}

	if (rule() == false) {
		return;
	}

	//state.emailTempForm.title = state.parameter.banner.title;

	if (state.emailTempForm.id !== 0) {
		//修改
		settingTmpListAdd(state.parameter, state.emailTempForm.id, state.emailTempForm.title).then(() => {
			ElMessage.success('邮件模板另存为新模板');
			//emit('dataList')
			//router.push({ path: '/system/mailtmp/list' });
		});
	}
}

function rule() {
	if (state.emailTempForm.title == '') {
		ElMessage.error('标题不能为空');
		return false;
	}

	const p = state.parameter;
	if (p.banner.title == '' || p.banner.head == '') {
		ElMessage.error('数据资讯头部部题，标题不能为空');
		return false;
	}

	if (p.one.title == '' || p.one.head == '' || p.one.content == '' || p.one.href == '') {
		ElMessage.error('数据要闻头部部题，标题不能为空');
		return false;
	}

	if (p.newcon.title == '' || p.newcon.content == '' || p.newcon.href == '') {
		ElMessage.error('标题不能为空');
		return false;
	}

	if (p.newTwo.title == '' || p.newTwo.head == '' || p.newTwo.href == '') {
		ElMessage.error('数据要闻标题不能为空');
		return false;
	}

	// if (p.newThree.title == '' || p.newThree.href == '') {
	// 	ElMessage.error('数据要闻标题不能为空');
	// 	return false;
	// }

	// if (p.newFour.title == '' || p.newFour.head == '' || p.newFour.href == '' || p.newFour.content == '') {
	// 	ElMessage.error('监管动态标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newFive.title == '' || p.newFive.href == '' || p.newFive.content == '') {
	// 	ElMessage.error('监管动态标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newSix.title == '' || p.newSix.head == '' || p.newSix.href == '' || p.newSix.content == '') {
	// 	ElMessage.error('案例评析标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newSeven.title == '' || p.newSeven.href == '' || p.newSeven.content == '') {
	// 	ElMessage.error('案例评析标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newEight.title == '' || p.newEight.href == '' || p.newEight.content == '') {
	// 	ElMessage.error('案例评析标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newNine.title == '' || p.newNine.head == '' || p.newNine.href == '' || p.newNine.content == '') {
	// 	ElMessage.error('瀛泰声誉标题/内容不能为空');
	// 	return false;
	// }

	// if (p.newTen.title == '' || p.newTen.href == '' || p.newTen.content == '') {
	// 	ElMessage.error('合规建议标题/内容不能为空');
	// 	return false;
	// }

	return true;
}

function headler() {
	const id = route.query.id as string;
	//console.log("article id=",id);
	if (id) {
		state.emailTempForm.id = Number(id);
		getEmailTmp(state.emailTempForm).then((rep) => {
			//console.log("parameter to string=",JSON.stringify(state.parameter));
			//console.log("parameter to server string=",rep.data.data.parameter);
			let parame = JSON.parse(rep.data.data.parameter);
			Object.keys(parame).forEach((k) => {
				state.parameter[k] = parame[k];
			});
			state.emailTempForm.title = rep.data.data.title;
			editinput('banner');
			console.log('parameter to obj=', state.emailTempForm.title);
		});
	}
}

onMounted(() => {
	headler();
});
</script>

<style type="text/css" scoped>
.background-header {
	background-image: url('/@/assets/images/emailTmp/newsletterLan.jpg');
	background-size: cover;
}
.background-interview {
	background-image: url('/@/assets/images/emailTmp/data.jpg');
	background-size: cover;
}

.news-title {
	font-size: 15px;
	color: #fff;
	letter-spacing: 1.1px;
	line-height: 22px;
}
.assist-title {
	margin-top: 15px;
	font-size: 15px;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	font-weight: normal;
}
.newitem_title {
	overflow: hidden;
	line-height: 20px;
	font-weight: bold;
	color: #6aba3d;
	font-size: 20px;
	text-align: left;
}
.news-title a {
	text-decoration: none;
	color: #fff;
}
.news-title a:visited {
	text-decoration: none;
	color: #fff;
}
.zhuanti_title,
.newtitle_text,
.newtitle_text2 {
	font-weight: bold;
	padding: 10px 0 0;
	/* color: #1e2d58; */
	font-size: 20px;
	height: 170px;
	line-height: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	background: #2a5188;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	cursor: pointer;
}
.newtitle_text2 {
	height: 80px;
	-webkit-line-clamp: 3;
}
.new_con,
.zhuanti_con {
	margin: 0 0 15px;
	color: #231815;
	line-height: 22px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	cursor: pointer;
}
.zhuanti_title {
	height: auto;
	-webkit-line-clamp: 1;
}
.line-background {
	background-image: url('/@/assets/images/emailTmp/line.jpg');
	background-size: 100% 100%;
}
.machine-background {
	background-image: url('/@/assets/images/emailTmp/machine.jpg');
	background-size: 100% 100%;
}
.master-p {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.assist-p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.newfoot {
	text-align: center;
}
.newfoot a {
	text-decoration: none;
	color: #0b3b7c;
	font-size: 14px;
}
.btn_link {
	width: 100%;
	width: 92%;
	margin-top: 20px;
	display: inline-block;
	cursor: pointer;
	color: #fff;
	border-radius: 5px;
	background-image: url('/@/assets/images/emailTmp/back.png');
	background-size: 100% 99%;
	height: 74px;
	line-height: 74px;
	padding: 0 30px;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 3px;
}
table tr td,
th {
	padding-left: 20px;
	padding-right: 20px;
}
</style>
